<script>
  import { createEventDispatcher } from 'svelte';
  
  const dispatch = createEventDispatcher();
  
  export let variant = 'primary'; // 按钮变体: 'primary' | 'secondary' | 'danger'
  export let text = false; // 是否为文本样式按钮
  export let size = 'medium'; // 按钮尺寸: 'small' | 'medium' | 'large'
  export let disabled = false; // 是否禁用
  export let loading = false; // 是否加载中
  
  function handleClick(event) {
    if (!disabled && !loading) {
      dispatch('click', event);
    }
  }
</script>

<button 
  class="base-btn {variant} {size}" 
  class:text
  class:disabled 
  class:loading
  {disabled}
  on:click={handleClick}
>
  {#if loading}
    <span class="loading-icon">⟳</span>
  {:else}
    <slot name="icon"></slot>
  {/if}
  <slot></slot>
</button>

<style>
  .base-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
    line-height:normal;
  }
  
  /* Variants */
  .primary {
    background: rgba(69, 81, 229, 1);
    color: #fff;
  }
  
  .primary:hover:not(:disabled) {
    background: rgba(69, 81, 229, 0.8);
  }
  
  .secondary {
    background: #fff;
    color: #666;
    border: 1px solid #e0e0e0;
  }
  
  .secondary:hover:not(:disabled) {
    background: #f8f8f8;
    border-color: #ccc;
  }
  
  .danger {
    background: #EE4646;
    color: #fff;
  }
  
  .danger:hover:not(:disabled) {
    background: #ff7875;
  }
  
  .text {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
  }
  
 
 
  .text.primary:hover:not(:disabled) {
    color: rgba(69, 81, 229) !important;
  }
  
  .text.secondary:hover:not(:disabled) {
    color: #333 !important;
  }
  
  .text.danger:hover:not(:disabled) {
    color: #EE4646 !important;
  }
  
  /* Sizes */
  .small {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .medium {
    padding: 7px 11px;
    font-size: 14px;
  }
  
  .large {
    padding: 12px 20px;
    font-size: 16px;
  }
  
  /* States */
  .disabled {
    background: #C5C5C5!important;
    color: #fff !important;
    cursor: not-allowed !important;
    border-color: #C5C5C5 !important;
  }
  
  .loading {
    cursor: wait;
  }
  
  .loading-icon {
    font-size: 16px;
    font-weight: bold;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

